﻿
@{
//ViewBag.Title = "StaffList";
//Layout = "~/Views/Shared/_Layout.cshtml";
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>StaffList</title>
</head>
<body>
    <div style="padding: 16px">
        <div class="layui-card">
            <h3>员工列表页</h3>
            <div class="layui-card-body">
                <div id="Tree">
                    <div id="test1" class="demo-tree demo-tree-box"></div>
                </div>
                <div id="StaffList">
                    <table class="layui-hide" id="testStaff" lay-filter="testStaff"></table>
                </div>
            </div>
        </div>
    </div>
    <style>
        .layui-card-body {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        #Tree {
            flex: 0 0 150px;
            background: #fff;
            padding: 15px;
        }

        #StaffList {
            flex: 1;
            min-width: 0;
        }
    </style>
    <script type="text/html" id="toolbarDemoStaff">
        <div class="layui-btn-container" style="width: auto;">
            <div class="layui-form-item" style="position: relative;">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="tel" name="name" lay-verify="required|phone" autocomplete="off" class="layui-input" style="height: 30px;">
                </div>
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input" style="height: 30px;">
                </div>
                <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
                <button class="layui-btn layui-btn-sm" lay-event="add" style="position: fixed;right: 3%;">添加</button>
            </div>
        </div>
    </script>
    <script type="text/html" id="barDemoStaff">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            {{#  if(d.State === 0){ }}
            <a class="layui-btn layui-btn-xs" lay-event="state">停用</a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-xs" lay-event="state">启用</a>
            {{#  } }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </div>
    </script>
    <script type="text/html" id="tplState">
        {{#  if(d.State === 0){ }}
        在职
        {{#  } else { }}
        停职
        {{#  } }}
    </script>
    <script type="text/html" id="tplImageurl">
        <img src="{{=d.ImgUrl}}" width="80" height="60" />
    </script>
    <script type="text/html" id="tplSex">
        {{#  if(d.Sex === 0){ }}
        男
        {{#  } else { }}
        女
        {{#  } }}
    </script>
    <script>
        layui.use(['tree', 'util', 'table', 'form'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util
                , table = layui.table
                , form = layui.form;

            $.post("/Staff/GetStaffTree", function (resp) {
                var data1 = resp;
                //常规用法
                tree.render({
                    elem: '#test1' //默认是点击节点可进行收缩
                    , data: data1
                    , click: function (obj) {
                        currentRoleId = obj.data.id;
                        // 重新加载表格
                        table.reload('testStaff', {
                            where: {
                                RoleId: currentRoleId
                            },
                            page: {
                                curr: 1 // 回到第一页
                            }
                        });
                    }
                });
            })
            table.render({
                elem: '#testStaff',
                id: 'testStaff', // 添加表格ID
                url: '/Staff/StaffAPI',
                toolbar: '#toolbarDemoStaff',
                height: 'full-35', // 最大高度减去其他容器已占有的高度差
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                defaultToolbar: [],
                where: {
                    RoleId: 0,
                    name: '',
                    phone: ''// 初始参数
                },
                page: {
                    limit:10
                },  //开启分页
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'Numbers', title: '工号' },
                    { field: 'Name', title: '姓名' },
                    { field: 'Phone', title: '电话' },
                    { field: 'CardId', title: '身份证号' },
                    { field: 'BankCard', title: '银行卡号' },
                    { field: 'RoleName', title: '角色' },
                    { field: 'State', title: '状态', templet: '#tplState' },
                    { field: 'ImgUrl', title: '头像', templet: '#tplImageurl' },
                    { field: 'OnboardingTime', title: '入职时间', templet: d => { return util.toDateString(d.OnboardingTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd HH:mm:ss') } },
                    { field: 'Pwd', title: '登录密码' },
                    { field: 'Sex', title: '性别', templet: '#tplSex' },
                    { field: 'Age', title: '年龄' },
                    { field: 'CreateTime', title: '创建时间', templet: d => { return util.toDateString(d.CreateTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd HH:mm:ss') } },
                    { fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemoStaff' },
                ]]
            })
            //触发单元格工具事件
            table.on('tool(testStaff)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                console.log(data)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        $.post("/Staff/Del/" + data.Id, function (resp) {
                            console.log(resp)
                        })
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑',
                        type: 2,
                        area: ['1000px', '600px'],
                        content: '/Staff/AddStaff/' + data.Id,
                    });
                } else if (obj.event === 'state') {
                    $.post("/Staff/StaffState/" + data.Id, function (resp) {
                        if (resp.code == 0) {
                            //重载当前界面
                            table.reload('testStaff');
                        }
                    })
                }
            });
            // 工具栏事件
            table.on('toolbar(testStaff)', function (obj) {
                if (obj.event == 'add') {
                    layer.open({
                        type: 2,
                        content: '/Staff/AddStaff',
                        area: ['1000px', '600px']
                    });
                }
                if (obj.event == 'search') {
                    // 获取输入框值
                    var name = $('input[name="name"]').val().trim();
                    var phone = $('input[name="phone"]').val().trim();
                    // 执行表格重载
                    table.reload('testStaff', {
                        where: {
                            name: name,
                            phone: phone,
                        }, 
                        page: {
                            curr: 1 // 重置到第一页
                        }
                    });
                    $('input[name="name"]').val(name);
                    $('input[name="phone"]').val(phone);
                }
            });
        })
    </script>

</body>
</html>

